<div class="main_content monitoring white_design">
    <monitoring-tabs></monitoring-tabs>
    <div class="tab-content">
        <h2 i18n="@@storage_systems">Storage systems</h2>
        <div class="filter_line" (keyup)="filterKeyUp($event)">
            <div class="filter_block">
                <filter-generator [schema]="filterSchema" filterIdTemplate="storage-systems" [model]="filters" (submit)="search(0)" [filterTreeHeight]="2"></filter-generator>
            </div>
        </div>
        <table class="table table-bordered table-condensed" *ngIf="_.size(matches) > 0">
            <thead>
                <tr>
                    <th colspan="2">
                    </th>
                    <th i18n="@@storage_id">Storage ID</th>
                    <th i18n="@@storage_uri">Storage URI</th>
                    <th i18n="@@read_only">Read Only</th>
                    <th i18n="@@storage_cluster_id">Storage Cluster ID</th>
                    <th i18n="@@ae_title">AE Title</th>
                    <th i18n="@@space_usable_total">Space ( Usable / Total )</th>
                    <th i18n="@@used">Used</th>
                    <th i18n="@@storage_duration">Storage Duration</th>
                    <th i18n="@@export_storage_id_external_retrieve_aet">Export Storage ID / External Retrieve AET</th>
                    <th i18n="@@deleter_storage_threshold">Deleter / Storage Threshold</th>
                </tr>
            </thead>
            <tbody>
                <ng-container *ngFor="let match of matches" >
                    <tr [attr.title]="match.properties.warning ? 'Deleter threshold	is bigger than usable space!':null">
                        <td [attr.rowspan]="(match.showProperties ? 2 : 1)" [innerHtml]="match.offset+1+'.'"></td>
                        <td>
                            <a (click)="$event.preventDefault();match.showProperties = !match.showProperties" href=""  i18n-title="@@show_properties" title="Show Properties">
                                <span class="glyphicon glyphicon-list"></span>
                            </a>
                        </td>
                        <td [innerHtml]="match.properties.dcmStorageID"></td>
                        <td [innerHtml]="match.properties.dcmURI" ></td>
                        <td [innerHtml]="match.properties.dcmReadOnly || 'false'" ></td>
                        <td [innerHtml]="match.properties.dcmStorageClusterID" ></td>
                        <td [innerHtml]="match.properties.dicomAETitle" ></td>
                        <td [ngClass]="{'error':match.properties.warning}">{{match.properties.usableSpace}} <span *ngIf="match.properties.usableSpace && match.properties.totalSpace">/</span> {{match.properties.totalSpace}}</td>
                        <td class="used_space_bar">
                            <span [innerHtml]="match.properties.usedSpace + ' %' || ''"></span>
                            <div class="bar" [ngStyle]="{'width.%': match.properties.usedSpace}"></div>
                            <div *ngIf="match.properties.deleterThresholdProcent" class="marker" [ngStyle]="{'left.%': ( 100 - match.properties.deleterThresholdProcent )}"></div>
                        </td>
                        <td>{{match.properties.dcmStorageDuration || 'PERMANENT'}}</td>
                        <td>
                            <ng-container *ngIf="match.properties.dcmExportStorageID || match.properties.dcmExternalRetrieveAET">
                                <span>{{match.properties.dcmExportStorageID || '-'}}</span> /
                                <span>{{match.properties.dcmExternalRetrieveAET || '-'}}</span>
                            </ng-container>
                        </td>
                        <td [ngClass]="{'error':match.properties.warning}">
                            <ng-container *ngIf="match.properties.deleterThreshold || match.properties.storageThreshold">
                                <span *ngIf="match.properties.deleterThresholdProcent">
                                    {{match.properties.deleterThresholdProcent}} % ( {{match.properties.deleterThreshold}} )
                                </span>
                                <span *ngIf="!match.properties.deleterThresholdProcent">-</span>
                                /
                                <span>{{match.properties.storageThreshold || '-'}}</span>
                            </ng-container>
                        </td>
                    </tr>
                    <tr *ngIf="match.showProperties">
                        <td colspan="11">
                            <table class="table table-bordered table-condensed attribute_list">
                                <ng-container *ngFor="let key of Object.keys(match.properties)">
                                    <tr *ngIf="key != 'warning'">
                                        <th [innerHtml]="key"></th>
                                        <td [innerHtml]="match.properties[key]"></td>
                                    </tr>
                                </ng-container>
                            </table>
                        </td>
                    </tr>
                    <tr [hidden]="true"></tr>
                </ng-container>
            </tbody>
        </table>
    </div>
</div>